import { Form, Input, Icon, Button, Select, Switch ,Row, Col} from 'antd';
import shortid from 'shortid';
import { useDynamicList, useRequest, useUpdate } from '@umijs/hooks';
import React, { useState, useRef, useCallback, useEffect } from 'react';

const { Option } = Select;
const {Item} = Form;
let id = 0;

const DynamicFieldSet = (props) => {
  const { timeDifferenceInfoData } = props;
  
  const { list, getKey, push, remove, resetList, replace } = useDynamicList();

  useEffect(() => {
    if (timeDifferenceInfoData && timeDifferenceInfoData.length > 0 && timeDifferenceInfoData[0].leftConditionValue) {
      resetList(timeDifferenceInfoData)
    } else {
      resetList([
        {
          leftConditionValue: 0,
          conditionValue: '',
          economyClassStandard: '',
          payMoney: ''
        }
      ])
    }
  }, [timeDifferenceInfoData])

  return (
    <div
      style={{
        marginBottom: 16,
      }}
    >
      <Form.Item>
        {list.map((ele, index) => (
          <div style={{ marginBottom: 16 }} key={getKey(index)} >
          <span style={{fontSize: '15px', marginLeft: '10px'}}>{index+1}. 改签航班时差  </span>
            {props.form.getFieldDecorator(`params[${getKey(index)}].leftConditionValue`, {
              initialValue: ele.leftConditionValue,
              getValueFromEvent: (event) => {
                return Number(event.target.value.replace(/\D/g, ''))
              }
            })(<Input style={{width: '50px', marginRight: '15px'}} type='text' disabled={list.length>1 && index !== 0}/>)}
            小时 &lt; 延误时长 &lt; =
            {props.form.getFieldDecorator(`params[${getKey(index)}].conditionValue`, {
              initialValue: ele.conditionValue,
              getValueFromEvent: (event) => {
                return Number(event.target.value.replace(/\D/g, ''))
              }
            })(<Input style={{width: '50px', margin: '0 15px'}} onChange={(e) => {
              if (index < list.length - 1) {
                replace(index + 1, {
                  leftConditionValue: Number(e.target.value)
                })
              }
            }}/>)}
            小时，
            <div style={{display: 'inline-block', marginLeft: '20px'}}>
              <div style={{width: '360px'}}>
                <span style={{display: 'inline-block', width: '190px'}}>补偿标准按照原航班舱位全价</span>
                {props.form.getFieldDecorator(`params[${getKey(index)}].damagePart`, {
                  initialValue: ele.damagePart,
                  getValueFromEvent: (event) => {
                    return Number(event.target.value.replace(/\D/g, ''))
                  }
                })(<Input style={{width: '120px', margin: '0 15px'}} addonAfter="(%)"/>)}
              </div>
              <div style={{width: '360px'}}>
                <span style={{display: 'inline-block', width: '190px'}}>或补偿固定金额</span>
                {props.form.getFieldDecorator(`params[${getKey(index)}].payMoney`, {
                  initialValue: ele.payMoney,
                  getValueFromEvent: (event) => {
                    return Number(event.target.value.replace(/\D/g, ''))
                  }
                })(<Input style={{width: '120px', margin: '0 15px'}} addonAfter="(元)"/>)}
              </div>
            </div>
            {list.length > 1 && (
              <Icon
                type="minus-circle-o"
                style={{
                  marginLeft: 8,
                }}
                onClick={() => {
                  remove(index);
                }}
              />
            )}
            <Icon
              type="plus-circle-o"
              style={{
                marginLeft: 8,
              }}
              onClick={() => {
                push({
                  leftConditionValue: props.form.getFieldsValue()['params'][index]['conditionValue'],
                  conditionValue: '',
                  damagePart: '',
                  payMoney: ''
                })
              }}
            />
          </div>
        ))}
      </Form.Item>
    </div>
  );
}
export default DynamicFieldSet;
